<template>
  <div class="home-container">
    <h2 class="headerH2">{{ $t('home.BackgroundManagementSystem') }}</h2>
    <div class="box">
      <el-card class="cardv">
        <div class="box1">
          <img style="width: 50px" src="../../assets/logo.png" alt="" />
          <h4>vue2+element-ui+node.js:一套基于</h4>
          <div class="tags">
            <el-tag type="warning">vue2</el-tag>
            <el-tag type="warning">element-ui</el-tag>
            <el-tag type="warning">node.js</el-tag>
            <el-tag type="warning">echarts</el-tag>
          </div>
          <h4>等技术的后台管理系统</h4>
        </div>
      </el-card>
    </div>
    <div class="box2">
      <el-card class="cardf">
        <h4>访问量</h4>
        <hr />
        <echart style="height: 280px" :chartData="echartData.visit"></echart>
      </el-card>
      <el-card class="cardx">
        <h4>下载数</h4>
        <hr />
        <echart style="height: 280px" :chartData="echartData.download" :isAxisChart="false"></echart>
      </el-card>
      <el-card class="cardj">
        <h4>技术栈</h4>
        <hr />
        <div style="height: 280px">
          <el-alert title="使用最新的技术" type="success" :closable="false"> </el-alert>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="vue2" label="vue2" width="130"> </el-table-column>
            <el-table-column prop="elementUi" label="element-ui" width="130"> </el-table-column>
            <el-table-column prop="node" label="node" width="130"> </el-table-column>
            <el-table-column prop="mysql" label="mysql" width="130"> </el-table-column>
            <el-table-column prop="echarts" label="echarts" width="130"> </el-table-column>
          </el-table>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="axios" label="axios" width="130"> </el-table-column>
            <el-table-column prop="wangeditor" label="wangeditor" width="130"> </el-table-column>
            <el-table-column prop="express" label="express" width="130"> </el-table-column>
            <el-table-column prop="mockjs" label="mockjs" width="130"> </el-table-column>
            <el-table-column prop="echarts" label="echarts" width="130"> </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <div class="box3">
      <el-card class="cardx">
        <h4 style="margin: 0; margin-left: 20px; font-weight: 500; margin-top: 5px">销售额</h4>
        <hr />
        <echart style="height: 450px" :chartData="echartData.zhexian"></echart>
      </el-card>
      <el-card class="cards">
        <Scroll></Scroll>
      </el-card>
    </div>
  </div>
</template>

<script>
import Echart from '../../components/EChart.vue'
import Scroll from '../../components/Scroll.vue'
export default {
  name: 'FirstProjectHome',

  data() {
    return {
      echartData: {
        visit: {
          xData: [],
          series: []
        },
        download: {
          series: []
        },
        zhexian: {
          xData: [],
          series: []
        }
      },
      tableData: [
        {
          vue2: '^2.6.14',
          elementUi: '^2.15.9',
          node: 'v16.13.1',
          mysql: '^2.18.1',
          echarts: '^5.3.3',
          axios: '^0.27.2',
          wangeditor: '^4.7.15',
          express: '~4.16.1',
          mockjs: '^1.1.0'
        }
      ]
    }
  },

  mounted() {},

  methods: {
    async getEchartList() {
      const { data: res } = await this.$http.get('getEcharts')
      console.log(res.data.orderData)
      // 订单折线图
      const zhexian = res.data.orderData
      this.echartData.zhexian.xData = zhexian.date
      // 第一步取出series中的name部分——键名
      let keyArray = Object.keys(zhexian.data[0])
      // 第二步，循环添加数据
      keyArray.forEach(key => {
        this.echartData.zhexian.series.push({
          name: key === 'wechat' ? '小程序' : key,
          data: zhexian.data.map(item => item[key]),
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          }
        })
      })
      // 用户柱状图
      this.echartData.visit.xData = res.data.userData.map(item => item.date)
      this.echartData.visit.series.push({
        name: '新增用户',
        data: res.data.userData.map(item => item.new),
        type: 'bar'
      })
      this.echartData.visit.series.push({
        name: '活跃用户',
        data: res.data.userData.map(item => item.active),
        type: 'bar',
        barGap: 0
      })
      // 视频饼图
      this.echartData.download.series.push({
        data: res.data.videoData,
        type: 'pie'
      })
    }
  },

  components: {
    Echart,
    Scroll
  },
  created() {
    this.getEchartList()
  }
}
</script>

<style lang="scss" scoped>
.headerH2 {
  text-align: center;
  margin: 0;
  margin-bottom: 20px;
}
.box1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  margin: 0;
}
::v-deep .el-card__body {
  padding: 0;
}
.box2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  .cardf {
    width: 360px;
    margin-right: 5px;
  }
  .cardx {
    width: 360px;
  }
  .cardj {
    width: 650px;
    margin-left: 30px;
  }
  ::v-deep h4 {
    margin: 0;
    margin-left: 20px;
    font-weight: 500;
    margin-top: 5px;
  }
}
.box3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cardx {
    width: 740px;
  }
  .cards {
    width: 650px;
  }
}
</style>
